<div id="app">
  <button v-for="tab in tabs" :key="tab" :class="{ active: currentTab === tab }" @click="currentTab = tab">
    {{ tab }}
  </button>
  <transition mode="out-in" name="fade">
    <keep-alive>
      <component :is="currentTab" class="tab"></component>
    </keep-alive>
  </transition>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        currentTab: 'Tab1',
        tabs: ['Tab1', 'Tab2']
      }
    },
  })
  app.component('Tab1', {
    template: `<div>Tab1 content</div>`,
  })
  app.component('Tab2', {
    template: `<div>
      <input v-model="value" /> {{value}}
    </div>`,
    data() { return { value: 'hello' } },
  })
  app.mount('#app')
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet" />

<style>
  .active {
    background: #ccc;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all .3s;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

</style>